<template>
  <a-modal
    v-model:visible="visible"
    :footer="false"
    simple
    hide-title
    modal-class="!p-0px !w-720px !rounded-16px overflow-hidden"
  >
    <div class="max-h-[90vh] overflow-y-scroll hidden-scrollbar">
      <div
        class="w-full h-84px min-h-84px flex flex-row items-center px-18px box-border shadow sticky top-0 bg-white z-10"
      >
        <div style="width: 60px; height: 60px">
          <img
            class="w-60px h-60px group-hover:scale-103 transition rounded-50%"
            :src="zone?.header_img"
            style="height: 60px"
          />
        </div>
        <div class="ml-12px h-60px flex-1">
          <div class="mt-6px h-20px leading-20px text-20px text-#333333 font-bold">
            {{ zone?.nick_name }}
          </div>
          <div class="mt-14px h-14px leading-14px text-14px text-#999999">
            {{ dayjs(zone?.created_at).format('YYYY-MM-DD HH:mm:ss') }}
          </div>
        </div>
        <img src="@/assets/more.png" alt="" class="w-14px h-18px cursor-pointer" />
      </div>
      <div class="w-full h-[fit-content] pt-18px px-18px pb-84px box-border">
        <div class="w-full text-14px leading-18px text-#333333 break-all">
          {{ zone?.content }}
        </div>
        <img
          v-if="zone?.media_url"
          :src="zone?.media_url"
          alt=""
          class="mt-12px w-90% max-w-608px! h-[fit-content] object-cover rounded-12px w-[fit-content] max-h-500px"
        />
        <div class="mt-12px mb-18px flex flex-row">
          <div class="mr-42px cursor-pointer flex flex-row items-center">
            <img
              :src="likeFillIcon"
              alt=""
              class="w-22px h-20px"
              v-if="zone?.liked"
              @click="handleCancelLike"
            />
            <template v-else>
              <AuthComponents @onClick="handleLike">
                <img :src="likeIcon" alt="" class="w-22px h-20px" />
              </AuthComponents>
            </template>

            <div class="ml-6px h-14px text-14px leading-14px text-#999999">
              {{ zone?.like_count }}
            </div>
          </div>
          <div class="mr-42px cursor-pointer flex flex-row items-center">
            <img src="@/assets/comment.png" alt="" class="w-22px h-20px" />
            <div class="ml-6px h-14px text-14px leading-14px text-#999999">
              {{ zone?.comment_count }}
            </div>
          </div>
          <div class="mr-42px cursor-pointer flex flex-row items-center">
            <img src="@/assets/sayhi.png" alt="" class="w-22px h-20px" />
            <div class="ml-6px h-14px text-14px leading-14px text-#999999">打声招呼</div>
          </div>
        </div>
        <div class="mt-17px w-full h-1px min-h-1px bg-#e6e6e6"></div>
        <div class="mt-18px w-full h-[fit-content] flex flex-row justify-between">
          <img :src="userInfo?.header_img || defaultIcon" class="w-36px h-36px rounded-50%" />
          <div
            class="w-638px h-[fit-content] bg-#F9FDFF rounded-8px border border-#F9FDFF pt-10px px-10px pb-8px box-border"
          >
            <textarea
              placeholder="新增留言"
              class="area w-full max-h-200px min-h-50px"
              v-model="content"
              maxlength="200"
            ></textarea>
            <div class="mt-18px w-full h-1px bg-#F9FDFF"></div>
            <div class="w-full flex flex-row items-center">
              <div class="flex-1"></div>
              <div class="mr-12px h-14px text-14px leading-14px text-#999999">
                {{ content.length }}/200
              </div>
              <AuthComponents @onClick="handleOk">
                <button
                  class="h-24px px-22px border-box bg-#6B39FF border border-#6B39FF rounded-12px text-white text-14px transition-all"
                  :class="{ ' opacity-50': content.length === 0 }"
                >
                  留言
                </button>
              </AuthComponents>
            </div>
          </div>
        </div>
        <div
          class="mt-32px w-full h-[fit-content] flex flex-row"
          v-for="comment in comments"
          :key="comment.id"
        >
          <img :src="comment?.header_img" class="w-36px h-36px rounded-50%" />
          <div class="w-full pl-10px box-border">
            <div class="w-full flex flex-row justify-between items-center">
              <div class="h-14px text-14px text-#666666 leading-14px">{{ comment?.nick_name }}</div>
              <div class="h-14px text-14px text-#999999 leading-14px">
                {{ dayjs(comment?.created_at).format('YYYY-M-D HH:mm') }}
              </div>
            </div>
            <div
              class="mt-8px w-full h-[fit-content] text-14px leading-20px text-#333333 cursor-pointer"
            >
              <span class="font-500"></span>{{ comment?.content }}
            </div>
            <!---->
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import { ref, watchEffect } from 'vue'
import { useVModel } from '@vueuse/core'
import { getComments, commentZone } from '@/api/zone'
import AuthComponents from '@/components/authComponents/index.vue'
import likeIcon from '@/assets/like.png'
import likeFillIcon from '@/assets/like_fill.png'
import defaultIcon from '@/assets/default_img.jpg'
import dayjs from 'dayjs'
// import useTime from '@/hooks/time'
const props = defineProps(['visible', 'zone'])
const emits = defineEmits(['update:visible', 'updateZone', 'clickLick', 'clickCancel'])
const visible = useVModel(props, 'visible', emits)
const content = ref('')
const comments = ref([])
import { useUserStore } from '@/store'
import { Message } from '@arco-design/web-vue'
const { userInfo } = useUserStore()
watchEffect(() => {
  if (visible.value) {
    getComments(props.zone.id).then((res) => {
      comments.value = res
    })
  }
})
const handleLike = () => {
  emits('clickLick', props.zone?.id)
}
const handleCancelLike = () => {
  emits('clickCancel', props.zone?.id)
}
const handleOk = () => {
  if (content.value.trim() === '') return
  commentZone({
    zone_id: props.zone.id,
    content: content.value
  }).then((res) => {
    comments.value.unshift({
      ...res,
      header_img: userInfo.header_img,
      nick_name: userInfo.nick_name
    })
    Message.success('留言成功')
    content.value = ''
    emits('updateZone', { ...props.zone, comment_count: props.zone.comment_count + 1 })
  })
}
</script>
<style lang="less" scoped>
.hidden-scrollbar {
  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
}
.input {
  box-sizing: border-box;
  border: 1px solid #d9d9d9;
  outline: none;
  padding: 10px;
}
.input:focus {
  box-shadow: 0 0 0 2px #7733ff;
  border: 1px solid transparent;
}
.area {
  overflow-y: hidden;
  border: none;
  outline: none;
}
.user-info {
  &&::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
}
.select {
  height: 44px;
  width: 300px;
  border: 1px solid #d9d9d9;
  padding-left: 10px;
}
::v-deep(.arco-select-view-single) {
  background-color: transparent !important;
  padding: 0;
}

::v-depp(.arco-select-view) {
  background-color: red !important;
  border-color: red !important;
  box-shadow: none !important;
}
::v-deep(.arco-input-wrapper) {
  background-color: transparent !important;
}
</style>
